<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录</title>
    <style>
        a {
            text-decoration: none;
        }

        .zddiv {
            width: 350px;
            height: 400px;
            border: 1px solid whitesmoke;
            margin: 0px 600px;
            margin-top: 20px;
            background-color: #fff;
        }

        .tbdiv {
            color: #999;
            font-size: 12px;
            height: 40px;
            background: url("img/01.png") no-repeat 20px 18px #fff8f0;
            text-align: center;
            padding-top: 5px;
        }

        .denglu {
            background-color: white;
            width: 173px;
            height: 40px;
            float: left;
            margin-top: 5px;
            border-bottom: 1px solid #f4f4f4;
            text-align: center;
        }

        .p1 {
            font-size: 18px;
            color: #999999;
        }

        .p2 {
            font-size: 18px;
            color: red;
            font-weight: bold;
        }

        .zjdiv {
            width: 306px;
            height: 223px;
            margin: 0px 20px;
        }

        .zjdiv [type="text"] {
            width: 244px;
            height: 38px;
            color: #999;
            font-size: 14px;
            background: url(img/02.png) no-repeat left;
            margin-top: 32px;
            padding-left: 60px;
            border: 1px solid #bdbdbd;
        }

        .zjdiv [type="password"] {
            width: 244px;
            height: 38px;
            background: url(img/03.png) no-repeat left;
            margin: 18px 0px;
            padding-left: 60px;
            color: #999999;
            border: 1px solid #bdbdbd;
        }

        .zjdiv [type="button"] {
            width: 306px;
            height: 30px;
            color: #fff;
            font-size: 20px;
            background-color: #e4393c;
            border: 1px solid #e85356;
            margin-top: 10px;
            cursor: pointer;
        }

        .zjdiv p {
            text-align: right;
        }

        .zjdiv a {
            color: #666;
            font-size: 12px;
        }


        .xmdiv {
            width: 350px;
            height: 50px;
            line-height: 50px;
            margin-top:81px;
            background-color: #fafafa;
            border-top: 1px solid #f4f4f4;
        }

        .xndiv .btm-1,
        .xmdiv .btm-2 {
            color: #666;
            font-size: 12px;
            display: inline-block;

        }

        .xmdiv .btm-1 {
            background: url(img/04.png) no-repeat left;
            padding-left: 30px;
            margin-left: 10px;
        }

        .sg {
            color: #ccc;
            font-size: 12px;
            padding: 0px 5px;
        }

        .xmdiv .btm-2 {
            background: url(img/05.png) no-repeat left;
            padding-left: 30px;
        }

        .xmdiv .btm-3 {
            color: #b61d1d;
            font-size: 14px;
            display: inline-block;
            background: url(img/06.png) no-repeat left;
            padding-left: 30px;
            margin-left: 93px;

        }
    </style>
</head>

<body>
    <div class="zddiv">
        <div class="tbdiv">
            <p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
        </div>
        <div class="denglu">
            <a class="p1" href="#">扫码登录</a>
        </div>
        <div class="denglu">
            <a class="p2" href="#">账户登录</a>
        </div>
        <div class="zjdiv">
            <input id="name" type="text"; placeholder="邮箱/用户名/登录手机">
            <input type="password" id="mima" placeholder="密码">
            <p><a href="#">忘记密码</a></p>
            <input type="button" id="dianji" value="登    录">
        </div>
        <div class="xmdiv">
            <a class="btm-1" href="#">QQ</a>
            <span class="sg">|</span>
            <a class="btm-2" href="#">微信</a>
            <a class="btm-3" href="#">立即注册</a>

        </div>
    </div>
</body>
<script>
    document.getElementById('dianji').addEventListener('click', function () {
        let name = document.getElementById("name").value;
        let mima = document.getElementById("mima").value;
        
        localStorage.setItem('name', name);
        
        localStorage.setItem("mima", mima);
    })
    window.onload = function () {
        
        document.getElementById('name').value = localStorage.getItem('name');
        
        document.getElementById('mima').value = localStorage.getItem('mima');
    }
</script>

</html>